<template>
    <view class="recommend-container page-background">
        <view class="bg-white">
            <cu-custom bgColor="#fff">
                <view slot="content" style="color: #000">群晖音乐</view>
            </cu-custom>
            <view class="cu-bar search">
                <view class="search-form round">
                    <text class="cuIcon-search"></text>
                    <input type="text" placeholder="搜索音乐 / 歌词" confirm-type="search" @click="toSearch" />
                </view>
            </view>
        </view>
        <scroll-view :style="{ height: height }" class="main-container" scroll-y>
            <view class="bg-white">
                <view class="banner-wrapper">
                    <swiper class="screen-swiper square-dot" style="min-height: 317upx;" :indicator-dots="true"
                        :circular="true" :autoplay="true" interval="5000" duration="500">
                        <swiper-item v-for="item in swiperList" :key="item.bannerId">
                            <image :src="item.pic || item.imageUrl" mode="scaleToFill" class="banner-img"></image>
                        </swiper-item>
                    </swiper>
                </view>
                <view class="list-wrapper flex">
                    <view class="cu-item flex-sub list-item" v-for="(item, index) in listOption" :key="item.ico"
                        @click="handleNative(item.url)">
                        <view :class="'iconfont list-ico basic-icon-color icon-' + item.ico"></view>
                        <text class="list-title basic-weight-color">{{ item.name }}</text>
                    </view>
                </view>
            </view>
            <view class="music-wrapper" v-if="dayRecommendList.length > 0">
                <box-title title="猜你喜欢" buttonName="播放全部" iconName="kaishi2"
                    @handlePlay="handlePlay('dayRecommendList')"></box-title>
                <music-list :currentList="dayRecommendList"></music-list>
            </view>
            <view class="music-wrapper" v-if="dayRecommendMusicList.length > 0">
                <box-title title="播放列表" buttonName="查看更多" iconName="right"
                    @handlePlay="handleNative('../songList/index')"></box-title>
                <song-list :currentList="dayRecommendMusicList"></song-list>
            </view>
            <view class="music-wrapper" v-if="recommendList.length > 0">
                <box-title title="热门歌单" buttonName="查看更多" iconName="right"
                    @handlePlay="handleNative('../songList/index')"></box-title>
                <song-list :currentList="recommendList"></song-list>
            </view>
            <view class="music-wrapper" v-if="hotSingerList.length > 0">
                <box-title title="热门歌手" buttonName="查看更多" iconName="kaishi2" :right="true"
                    @handlePlay="handleNative('../singer/index')"></box-title>
                <singer-list :currentList="hotSingerList"></singer-list>
            </view>
            <view class="music-wrapper" v-if="newSongList.length > 0">
                <box-title title="新歌速递" buttonName="播放全部" iconName="kaishi2" @handlePlay="handlePlay('newSongList')">
                </box-title>
                <music-list :currentList="newSongList"></music-list>
            </view>
            <view class="music-wrapper" v-if="selectData.length > 0">
                <box-title title="网友精选歌单" buttonName="查看更多" iconName="right"
                    @handlePlay="handleNative('../songList/index')"></box-title>
                <song-list :currentList="selectData"></song-list>
            </view>
        </scroll-view>
        <tab-bar currentPage="home" />
    </view>
</template>

<script>
    import songList from './components/songListV2.vue';
    import musicList from './components/musicList.vue';
    import singerList from './components/singerList.vue';
    import {
        getImage,
        getName
    } from '@/utils/index.js';
    export default {
        data() {
            return {
                //轮播图
                swiperList: [{
                    bannerId: 1,
                    pic: '/static/tabBar/banner1.jpg'
                }],
                recommendList: [],
                dayRecommendList: [],
                dayRecommendMusicList: [],
                newSongList: [],
                hotSingerList: [],
                selectData: [],
                listOption: [{
                        name: '每日推荐',
                        ico: 'xihuan',
                        url: '../dayRecommend/index'
                    },
                    {
                        name: '全部音乐',
                        ico: 'weixin',
                        url: '../allSong/index'
                    },
                    // {
                    //     name: '推荐歌单',
                    //     ico: 'remen',
                    //     url: '../songList/index'
                    // },
                    {
                        name: '随便听听',
                        ico: 'remen',
                        url: '../dayRecommend/index'
                    },
                    {
                        name: '排行榜',
                        ico: 'paihang',
                        url: '../rankList/index'
                    },
                    {
                        name: '歌手分类',
                        ico: 'maikefeng',
                        url: '../singer/index'
                    }
                ]
            };
        },
        components: {
            songList,
            musicList,
            singerList
        },
        computed: {
            cookie() {
                return this.$store.state.cookie;
            },
            height() {
                let height = this.CustomBar / (uni.upx2px(this.CustomBar) / this.CustomBar) + 220;
                return `calc(100%  - ${height}rpx)`;
            }
        },
        onShow() {
            // this.getDayRecommendData();
            // this.getDayRecommendMusicData();
        },
        created() {
            this.getData();
        },
        onPullDownRefresh() {
            this.getData();
            setTimeout(() => {
                uni.stopPullDownRefresh();
            }, 1000);
        },
        /**
         * 初始化
         */
        mounted() {
            this.loadMusicInfo()
        },
        methods: {
            getData() {
                // this.getBannerData();
                // this.getRecommendData();
                // this.getNewSongData();
                // this.getSelectionData();
                // this.getHotSingerData();
            },

            //播放全部 猜你喜欢
            handlePlay(key) {
                const list = this[key].map(item => {
                    return {
                        src: '',
                        title: item.name,
                        singer: getName(item),
                        coverImgUrl: getImage(item),
                        id: item.id
                    };
                });
                this.$store.dispatch('playAllMUsic', list);
            },

            handleNative(val) {
                uni.navigateTo({
                    url: val
                });
            },

            // 获取轮播图数据
            async getBannerData() {
                const data = await this.$api.getBanner();
                this.swiperList = data.banners || [];
            },

            //获取推荐歌单数据
            async getRecommendData() {
                const data = await this.$api.getRecommendList();
                this.recommendList = data.result.slice(0, 8);
            },

            //获取猜你喜欢歌曲
            async getDayRecommendData() {
                const {
                    data
                } = await this.$api.getDayRecommendList();
                this.dayRecommendList = data.dailySongs;
            },

            //获取推荐歌单
            async getDayRecommendMusicData() {
                const data = await this.$api.getDayRecommendMusicList();
                this.dayRecommendMusicList = data.recommend || [];
            },

            //获取新歌数据
            async getNewSongData() {
                const data = await this.$api.getNewSongList();
                this.newSongList = data.result.slice(0, 9);
            },

            //获取网友精选歌单
            async getSelectionData() {
                const data = await this.$api.getSelectionData();
                this.selectData = data.playlists || [];
            },

            //获取热门歌手数据
            async getHotSingerData() {
                const data = await this.$api.getHotSingerList();
                this.hotSingerList = (data.artists || []).slice(0, 10);
            },

            toSearch() {
                uni.navigateTo({
                    url: '../search/index'
                });
            },
            /**
             * 加载群晖音乐信息
             */
            loadMusicInfo() {
                this.loadAllApiInfo();
            },
            /**
             * 加载所以群晖api接口地址
             * 主要是获取audio的地址来用
             */
            loadAllApiInfo() {
                if (this.$config.api) {
                    this.getinfo()
                    return
                }
                this.$post('/webapi/entry.cgi', {
                    query: 'all',
                    api: 'SYNO.API.Info',
                    method: 'query',
                    version: 1
                }).then(data => {
                    // console.log('[信息]群晖api参数', data)
                    if (data.success) {
                        this.$config.api = data.data
                        uni.setStorageSync('QH_API', data.data)
                        this.getinfo()
                    }
                })
            },
            /**
             * 获取群晖音乐信息
             */
            getinfo() {
                if (!this.$cache.AudioStation.Info) {
                    this.$Api('SYNO.AudioStation.Info', {
                        method: 'getinfo'
                    }).then(result => {
                        console.log('[信息]群晖音乐参数', result)
                        if (result.success) {
                            this.$cache.AudioStation.Info = result.data
                        }
                    })
                }
                if (!this.$cache.AudioStation.playlists) {
                    this.$Api('SYNO.AudioStation.Playlist', {
                        method: 'list',
                        library: 'all',
                        limit: 100000
                    }).then(result => {
                        console.log('[信息]群晖音乐播放列表', result)
                        if (result.success) {
                            this.$cache.AudioStation.playlists = result.data.playlists
                            this.dayRecommendMusicList = []
                            for (let i = 0; i < this.$cache.AudioStation.playlists.length; i++) {
                                if (this.$cache.AudioStation.playlists[i].name !=
                                    '__SYNO_AUDIO_SHARED_SONGS__') {
                                    this.dayRecommendMusicList.push(this.$cache.AudioStation.playlists[i])
                                }
                            }
                        }

                    })
                }
                //智能生成歌单
                if (this.dayRecommendMusicList.length <= 0) {
                    // this.$Api('SYNO.AudioStation.Song', {
                    //     method: 'list',
                    //     library: 'shared',
                    //     additional: 'song_tag,song_audio,song_rating',
                    //     sort_by: 'random',
                    //     limit: 30
                    // }).then(result => {
                    //     console.log('[信息]群晖音乐智能生成歌单', result)
                    //     if (result.success) {
                    //         this.dayRecommendMusicList = result.data.songs
                    //     }

                    // })
                }

            }
        }
    };
</script>

<style lang="scss" scoped>
    .recommend-container {
        position: relative;
        height: 100%;

        .main-container {
            position: relative;

            .banner-wrapper {
                box-sizing: border-box;
                padding: 10px;

                .banner-img {
                    height: 158px;
                    border-radius: 6px;
                }
            }

            .list-wrapper {
                margin-top: 8px;
                padding-bottom: 12px;

                .list-item {
                    text-align: center;
                    font-size: 24rpx;
                }

                .list-ico {
                    font-size: 72rpx;
                    margin-bottom: 6px;
                }

                .list-title {
                    font-size: 28rpx;
                }
            }

            .music-wrapper {
                margin-top: 5px;
                background: #fff;
                box-sizing: border-box;
                padding: 10px;

                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }
</style>
